<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.js"></script> 

<script>
$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});



</script>

<style>
.white-popup-block {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>
</head>
<body>

<a href="http://localhost:8080/hgm/magnify2.jsp" class="ajax-popup-link">Show inline popup</a>

<script>
$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
</script>
</body>
</html>